﻿<script src="~/Content/vue/vue.js"></script>
<script src="~/Content/axios/axios.js"></script>

<div id="RoleEditDiv">

</div>
<div id="RolePage">

    <div class="portlet-title">
        <div>
            <i class="fa fa-user"></i>角色列表
            <input type="text" placeholder="请出入关键字..." v-model:value="keyword" />
            <button type="button" v-on:click="search">搜索</button>
            <button type="button" v-on:click="add"><i class="fa fa-pencil"></i> 新增菜单</button>
        </div>

    </div>
    <div class="portlet-body">
        <table class="table table-striped table-bordered table-hover dataTable">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>角色名字</th>
                    <th>排序</th>
                    <th>添加时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(data, index) in listdata">
                    <td>{{index+1}}</td>
                    <td>{{data.Name}}</td>
                    <td>{{data.Sort}}</td>
                    <td>{{data.AddTime}}</td>
                    <td>
                        <button type="button" class="btn  btn-xs" v-on:click="edit(index)"><i class="fa fa-edit"></i> 编辑</button>
                        <button type="button" class="btn  btn-xs" v-on:click="remove(index)"><i class="fa fa-edit"></i> 删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

</div>

<script>

    var app = new Vue({
        el: '#RolePage',
        data: {
            keyword: '',
            listdata: []
        },
        methods: {
            search: function () {

                axios.post("@Url.Action("GetListRole")", { keyword: app.keyword })
                    .then(function (response) {
                        app.listdata = response.data
                    });
            },
            add: function () {
                 $("#RoleEditDiv").load("@Url.Action("RoleEdit")", { id: null, listPage: "#RolePage" });
            },
            edit: function (index) {
                $("#RoleEditDiv").load("@Url.Action("RoleEdit")", { id: this.listdata[index].Id, listPage: "#RolePage" });
            },
            remove: function (index) {
                alert(this.listdata[index].Id);
            }
        }
    })

    app.search();

</script>



